<template>
  <div class="login">
    <!-- 标题 -->
    <div class="login-title">
      <img
        src="@/assets/image/logo.png"
        alt=""
      >
      <h1>纪检监察信息化平台</h1>
      <!-- 三角 -->
      <div></div>
    </div>
    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- 左侧图片 -->
      <div>
        <img
          src="@/assets/image/user.png"
          alt=""
        >
      </div>
      <!-- 右侧表单 -->
      <div>
        <h2>用户登录</h2>
        <el-input
          v-model="username"
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
          clearable
        ></el-input>
        <el-input
          v-model="password"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          clearable
        ></el-input>
        <el-button
          type="primary"
          @click="login"
        >登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '', // 用户名
      password: '' // 密码
    }
  },
  created() { },
  mounted() { },
  methods: {
    // 用户登录
    login() {
      if (this.username && this.password) {
        this.$router.push('/accuse')
        console.log(this.username, this.password)
      } else {
        this.$message.error('请输入用户名和密码！')
        return false
      }
    }
  }
}
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../assets/image/bg.jpg") no-repeat center;
  // 标题样式
  .login-title {
    width: 600px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: #d31517;
    position: relative;
    img {
      width: 300px;
      height: 35px;
      margin-right: 10px;
    }
    h1 {
      font-size: 30px;
      color: #ffffff;
      line-height: 62px;
      margin: 0;
      padding-left: 10px;
      border-left: 1px solid #ffffff;
    }
    div {
      position: absolute;
      right: -62px;
      width: 0;
      height: 0;
      border: 32px solid transparent;
      border-top: 30px solid #d31517;
      border-left: 30px solid #d31517;
    }
  }
  .login-card {
    width: 80%;
    height: 550px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 0px 12px 30px 0px rgba(5, 32, 65, 0.5);
    border-radius: 6px;
    display: flex;
    overflow: hidden;
    opacity: 0.9;
    // 左侧图片
    > div:first-child {
      flex: 1;
      background: linear-gradient(180deg, #d31517 0%, #fc424d 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    // 右侧登录表单
    > div:last-child {
      width: 400px;
      height: 100%;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      h2 {
        font-size: 30px;
        font-weight: bold;
        color: #fc424d;
        margin-bottom: 100px;
      }
      .el-button {
        background: #fc424d;
        width: 80%;
        border: none;
      }
    }
  }
}
</style>
<style lang="less">
.login {
  .el-input {
    width: 80%;
    margin-bottom: 20px;
  }
}
</style>
